<template>
  <el-form ref="ruleForm" label-width="160px" v-loading="loading">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <div>
        <el-row v-if="detailData">
          <el-col :span="12"
            ><el-form-item label="商户账号">{{ detailData.userName | notitle }}</el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="商户名称">{{ detailData.mchName | notitle }}</el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="纳税人识别号">{{ detailData.taxpayerNo | notitle }}</el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="法人代表">{{ detailData.ledgerName | notitle }}</el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="手机号码">{{ detailData.contactPhone | notitle }}</el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="商户电话">{{ detailData.landline | notitle }}</el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item label="渠道">
              <template v-if="detailData.channelList && detailData.channelList.length">
                <el-tag size="small" v-for="item of detailData.channelList" :key="item.id">{{ item.channelName }}</el-tag>
              </template>
              <template v-else>
                <label>无</label>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card margin_top_20">
      <div slot="header" class="clearfix">
        <span>资质信息</span>
      </div>
      <div>
        <el-row v-if="detailData">
          <el-col :span="12">
            <el-form-item label="营业执照附件">
              <app-uploader :limit="-1" :initFiles="detailData.licenseImg ? [detailData.licenseImg] : null" disabled></app-uploader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="税务登记证">
              <app-uploader :limit="-1" :initFiles="detailData.taxRegistrationImg ? [detailData.taxRegistrationImg] : null" disabled></app-uploader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证正面">
              <app-uploader :limit="-1" :initFiles="detailData.idcardFrontImg ? [detailData.idcardFrontImg] : null" disabled></app-uploader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证反面">
              <app-uploader :limit="-1" :initFiles="detailData.idcardBackImg ? [detailData.idcardBackImg] : null" disabled></app-uploader>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="detailData.paymentVoucher">
            <el-form-item label="打款凭证">
              <app-uploader :limit="-1" :initFiles="detailData.paymentVoucher ? [detailData.paymentVoucher] : null" disabled></app-uploader>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="detailData.contractFile">
            <el-form-item label="合同">
              <app-uploader :limit="-1" :initFiles="detailData.contractFile ? [detailData.contractFile] : null" disabled></app-uploader>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card margin_top_20" v-if="detailData && detailData.bankcard">
      <div slot="header" class="clearfix">
        <span>银行账户信息</span>
      </div>
      <div>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="开户名称">{{ detailData.bankcard.bankName | notitle }}</el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="银行账户">{{ detailData.bankcard.bankcardNumber | notitle }}</el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item label="银行卡类型">
              <el-tag size="small" v-if="detailData.bankcard.bankcardType == 0">借记卡</el-tag>
              <el-tag size="small" v-if="detailData.bankcard.bankcardType == 1">储蓄卡</el-tag>
              <el-tag size="small" v-if="detailData.bankcard.bankcardType == 2">信用卡</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><el-form-item label="开户地址">{{ detailData.bankcard.address | notitle }}</el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="持卡人姓名">{{ detailData.bankcard.userName | notitle }}</el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="持卡人身份证号">{{ detailData.bankcard.idNumber | notitle }}</el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="开户预留电话">{{ detailData.bankcard.bankPhone | notitle }}</el-form-item></el-col
          >
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card margin_top_20">
      <div slot="header" class="clearfix">
        <span>门店信息</span>
      </div>
      <div>
        <el-table max-height="720" :data="tableList1" stripe :header-cell-style="tableHeaderStyle" v-loading="loading1">
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="storeLogo" label="门店图片" width="120">
            <template slot-scope="scope">
              <img :src="imgurl + scope.row.storeLogo" width="80" height="80" v-if="scope.row.storeLogo" />
            </template>
          </el-table-column>
          <el-table-column prop="mchId" label="商户名称"></el-table-column>
          <el-table-column prop="id" label="门店编码"></el-table-column>
          <el-table-column prop="contactPhone" label="联系电话"></el-table-column>
          <el-table-column prop="contacts" label="门店负责人"></el-table-column>
          <el-table-column prop="equipmentCount" label="设备数"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column prop="bindStatus" label="绑定状态">
            <template slot-scope="scope">
              <el-switch class="lef" :value="scope.row.bindStatus == 0"></el-switch>
            </template>
          </el-table-column>
        </el-table>
        <div class="text-center">
          <br />
          <el-pagination background @size-change="handleSizeChange1" @current-change="handlePagingChange1" :current-page="pageIndex1" :page-sizes="pageSizes" :page-size="pageSize1" :layout="paginationLayout" :total="pageCount1"> </el-pagination>
        </div>
      </div>
    </el-card>
    <el-card class="box-card margin_top_20">
      <div slot="header" class="clearfix">
        <span>设备信息</span>
      </div>
      <div>
        <el-table max-height="720" :data="tableList2" stripe :header-cell-style="tableHeaderStyle" v-loading="loading2">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="equipmentName" label="设备名称"></el-table-column>
          <el-table-column prop="equipmentNo" label="SN编号"></el-table-column>
          <el-table-column prop="storeId" label="门店编码"></el-table-column>
          <el-table-column prop="activationTime" label="创建时间"></el-table-column>
          <el-table-column prop="status" label="运行状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">在线</span>
              <span v-else>离线</span>
            </template>
          </el-table-column>
          <el-table-column prop="enableStatus" label="是否启用">
            <template slot-scope="scope">
              <el-switch class="lef" :value="scope.row.enableStatus == 0"></el-switch>
            </template>
          </el-table-column>
        </el-table>
        <div class="text-center">
          <br />
          <el-pagination background @size-change="handleSizeChange2" @current-change="handlePagingChange2" :current-page="pageIndex2" :page-sizes="pageSizes" :page-size="pageSize2" :layout="paginationLayout" :total="pageCount2"> </el-pagination>
        </div>
      </div>
    </el-card>

    <div class="margin_top_20 text-center" v-if="$route.params.status >= 0">
      <div v-if="$route.params.status != 1 && $route.params.status != 2">
        <el-button @click="agreeOption()" type="primary">同意</el-button>
        <el-button @click="rejectOption()" type="danger">拒绝</el-button>
      </div>
      <div v-else>
        <div v-if="$route.params.status == 1">√ 已通过审核</div>
        <div v-if="$route.params.status == 2">× 已拒绝审核</div>
      </div>
      <!-- <div class="margin_top_10"><el-button @click="goback()">返回</el-button></div> -->
    </div>
  </el-form>
</template>

<script>
import Setting from '@/settings'
import AppUploader from '@/components/AppUploader/index'
import { GetMerchantDetail, GetMerchantShopList, GetMerchantDeviceList, ChangeMerchantReviewStatus } from '@/views/merchant-management/services'
export default {
  components: {
    AppUploader,
  },
  data() {
    return {
      imgurl: `${process.env.VUE_APP_FILE_URL}/`,
      detailData: null,
      loading: false,
      MerchantId: this.$route.query.id,
      pageIndex1: 1,
      pageIndex2: 1,
      pageCount1: 0,
      pageCount2: 0,
      loading1: false,
      loading2: false,
      tableList1: [],
      tableList2: [],
      pageSize1: Setting.defaultTablePaginationSize,
      pageSize2: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
    }
  },
  filters: {
    notitle(val) {
      return val ? val : '无'
    },
  },
  created() {
    this.getMerchantDetail()
    this.getShopList()
    this.getDeviceList()
  },
  methods: {
    handlePagingChange1(event) {
      this.pageIndex1 = event
      this.getShopList()
    },
    handleSizeChange1(event) {
      this.pageIndex1 = 1
      this.pageSize1 = event
      this.getShopList()
    },
    handlePagingChange2(event) {
      this.pageIndex2 = event
      this.getDeviceList()
    },
    handleSizeChange2(event) {
      this.pageIndex2 = 1
      this.pageSize2 = event
      this.getDeviceList()
    },
    getMerchantDetail() {
      this.loading = true
      GetMerchantDetail({ id: this.MerchantId })
        .finally(() => (this.loading = false))
        .then(data => {
          if (data && data.code == 200) {
            this.detailData = data.data
          }
        })
    },
    getShopList() {
      this.loading1 = true
      GetMerchantShopList({
        mchId: this.$store.getters.userInfo ? JSON.parse(this.$store.getters.userInfo).mchId : '1',
        pageNum: this.pageIndex1,
        pageSize: this.pageSize1,
      })
        .finally(() => (this.loading1 = false))
        .then(data => {
          if (data && data.code == 200) {
            this.tableList1 = data.data.list
            this.pageCount1 = data.data.total
          }
        })
    },
    getDeviceList() {
      this.loading2 = true
      GetMerchantDeviceList({
        mchId: this.$store.getters.userInfo ? JSON.parse(this.$store.getters.userInfo).mchId : '1',
        pageNum: this.pageIndex2,
        pageSize: this.pageSize2,
      })
        .finally(() => (this.loading2 = false))
        .then(data => {
          if (data && data.code == 200) {
            this.tableList2 = data.data.list
            this.pageCount2 = data.data.total
          }
        })
    },
    goback() {
      this.$router.go(-1)
    },
    agreeOption(view) {
      //通过审核商户
      this.$confirm(`您将通过${this.detailData.mchName}的申请，是否继续？`, {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        closeOnPressEscape: false,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            ChangeMerchantReviewStatus({ id: this.detailData.id, status: 1, mchId: this.detailData.mchId })
              .finally(() => (instance.confirmButtonLoading = false))
              .then(res => {
                if (res && res.code == 200) {
                  this.$message.success('操作成功!')
                  done()
                } else {
                  this.$message.error(res.msg)
                }
              })
          } else {
            done()
          }
        },
      }).then(() => {
        this.goback()
      })
    },
    rejectOption() {
      this.$confirm(`您将拒绝${this.detailData.mchName}的申请，是否继续？`, {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        closeOnPressEscape: false,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            ChangeMerchantReviewStatus({ id: this.detailData.id, status: 2, mchId: this.detailData.mchId })
              .finally(() => (instance.confirmButtonLoading = false))
              .then(res => {
                if (res && res.code == 200) {
                  this.$message.success('操作成功!')
                  done()
                } else {
                  this.$message.error(res.msg)
                }
              })
          } else {
            done()
          }
        },
      }).then(() => {
        this.goback()
      })
    },
  },
}
</script>
